<script setup lang="ts">
</script>

<template>
  <div style="height: 500px;border: 1px solid #000;">
    <w-scroll>
      <template #content>
        <ul>
          <li>Lorem ipsum dolor sit amet consectetur.</li>
          <li>Corporis magnam autem dolores explicabo mollitia.</li>
          <li>Vel quod consequatur qui totam eius.</li>
          <li>Vitae fugit aliquid modi eum consequatur!</li>
          <li>Corrupti natus deserunt velit debitis error.</li>
          <li>Porro aliquid sed inventore corporis dignissimos?</li>
          <li>Impedit, magni! Officiis, officia odit! Quam?</li>
          <li>Tenetur nihil molestias architecto commodi reprehenderit.</li>
          <li>Ducimus cumque dignissimos amet aut quas?</li>
          <li>Illum quam a cum repudiandae molestiae!</li>
          <li>Nemo doloribus exercitationem ducimus rerum eaque.</li>
          <li>Nesciunt ex veritatis voluptatibus dignissimos in.</li>
          <li>Rem nihil enim ducimus saepe magnam?</li>
          <li>Impedit quae perferendis corporis sapiente odit?</li>
          <li>Cupiditate autem iure velit molestiae ipsum.</li>
          <li>Harum explicabo accusamus ducimus atque vitae?</li>
          <li>Reiciendis, adipisci? Officiis sapiente necessitatibus vel?</li>
          <li>Sunt fugit excepturi exercitationem dolores iste?</li>
          <li>Odit modi aliquid molestias quibusdam obcaecati?</li>
          <li>Quis ex vitae ea sapiente consequatur?</li>
        </ul>
      </template>
    </w-scroll>
  </div>
</template>

<style scoped>
ul{
  padding: 0;
  margin: 0;
  list-style: none;
}

li {
  height: 40px;
  text-align: left;
}
.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
  transition: filter 300ms;
}
.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.vue:hover {
  filter: drop-shadow(0 0 2em #42b883aa);
}
</style>
